{% from 'macros/card-authors.njk' import cardAuthors with context %}

{% macro blogCard(post) %}
{% set pd = post.data %}
<div class="blog-card rounded-lg pad-300 md:pad-400 width-full">

  {% set thumbnail = pd.hero or pd.thumbnail %}
  {% set alt = pd.alt %}
  {% set tags = pd.tags %}

  {% if thumbnail %}
    {#
      The thumbnail image defines its own bottom margin because it's optional
      and needs to push the title down. If the title defined its own top
      margin and the thumbnail was omitted then there would be too much space
      between the title and the top of the card.
    #}
    <div class="blog-card__thumbnail gap-bottom-300">
      <a class="display-block" href="{{ post.url }}" {% if not alt %}aria-hidden="true" tabindex="-1"{% endif %}>
        {% Img
          class="rounded-100 object-fit-cover width-full",
          src=thumbnail,
          alt=alt,
          width="278",
          height="156",
          sizes="(min-width: 36em) 330px, calc(100vw - 82px)"
        %}
      </a>
    </div>
  {% endif %}

  <h2 class="type--h5">
    <a class="surface display-inline-flex color-text" href="{{ post.url }}">
      {{ pd.title }}
    </a>
  </h2>

{% if not thumbnail %}
  <p class="type--caption gap-top-200">
     {{ pd.description }}
  </p>
{% endif %}

  {% set tags = pd.tags %}
  {% include 'partials/tags.njk' %}

  {# Always render "authors" even with zero authors, as this renders the date #}
  <div class="gap-top-300">
    {{ cardAuthors(pd.authors, pd.date) }}
  </div>

</div>
{% endmacro %}
